Vant TreeSelect 分类选择 |
您所在的位置：网站首页 › vant tree › Vant TreeSelect 分类选择 |
|
引入import Vue from 'vue';
import { TreeSelect } from 'vant';
Vue.use(TreeSelect);
代码演示单选模式 item为分类显示所需的数据，数据格式见下方示例。main-active-index表示左侧高亮选项的索引，active-id表示右侧高亮选项的 id export default { data() { return { items, activeId: 1, activeIndex: 0 }; } } 多选模式active-id为数组格式时，可以选中多个右侧选项 export default { data() { return { items, activeIds: [1, 2], activeIndex: 0 }; } } 自定义内容通过content插槽可以自定义右侧区域的内容 export default { data() { return { active: 0, items: [{ text: '分组 1' }, { text: '分组 2' }] } } } 提示信息设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标 export default { data() { return { activeIndex: 0, items: [ { text: '浙江', children: [], dot: true }, { text: '江苏', children: [], info: 5 } ] } } } APIPropsitems分类显示所需的数据Item[][]height高度，默认单位为pxnumber | string300main-active-index左侧选中项的索引number | string0active-id右侧选中项的 id，支持传入数组number | string |(number | string)[]0max v2.2.0右侧项最大选中个数number | stringInfinityEventsclick-nav点击左侧导航时触发index：被点击的导航的索引click-item点击右侧选择项时触发data: 该点击项的数据Slotscontent自定义右侧区域内容Item 数据结构items 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，text表示当前分类的名称，children表示分类里的可选项。 [ { // 导航名称 text: '所有城市', // 导航名称右上角徽标 info: 3, // 是否在导航名称右上角显示小红点 dot: true, // 导航节点额外类名 className: 'my-class', // 该导航下所有的可选项 children: [ { // 名称 text: '温州', // id，作为匹配选中状态的标识符 id: 1, // 禁用选项 disabled: true }, { text: '杭州', id: 2 } ] } ] |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |